<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../statics/styles/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.motLeftMenu .mui-navigate-right {
				font-size: 16px;
			}
		</style>
	</head>

	<body>

		<!-- 缩放式侧滑（类手机QQ） -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-scalable">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left mui-transitioning" id="offCanvasSide">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="mui-content-padded" style="margin-bottom: 30px;">
							<h3 style="color: #fff; height: 40px;">速速链接</h3>
							<p>统一、快速、免费的链接地址管理</p>
							<p>彻底摆脱因浏览器或设备不同，所导致的网页收藏目录不一致的烦恼。</p>
							<p>在这里，已收录了许多常用的链接地址，并会定期上新，您也可自行添加，以便搜索，是您统一的在线收藏夹。</p>
						</div>
						<ul class="mui-table-view mui-table-view-inverted" style="color: #ddd;">
							<li class="mui-table-view-cell motLeftMenu" data-ssl-url="login.html">
								<a class="mui-navigate-right">登入</a>
							</li>
							<li class="mui-table-view-cell motLeftMenu" data-ssl-url="reg.html">
								<a class="mui-navigate-right">注册</a>
							</li>
							<li class="mui-table-view-cell motLeftMenu" data-ssl-url="about.html">
								<a class="mui-navigate-right">关于</a>
							</li>
						</ul>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap mui-transitioning">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
					<h1 class="mui-title">SuSuLink</h1>
				</header>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">首页</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-list"></span>
						<span class="mui-tab-label">私链</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-compose"></span>
						<span class="mui-tab-label">To Do List</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-gear"></span>
						<span class="mui-tab-label">设置</span>
					</a>
				</nav>
				<div class="mui-content mui-scroll-wrapper" id="motContentBox">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<div class="mui-input-row mui-search mui-plus-visible" style="margin: 10px 10px -10px 10px;">
							<input id="search" type="search" class="mui-input-speech" placeholder=" 搜索" style="background-color: #fff;" v-model="keywords" @change="onSearchKeywordsChange">
						</div>
						<div style="font-size: 14px; padding: 5px 10px;">共找到 {{ total }} 条匹配数据，已加载 {{ links.length }} 条。</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media motLink" v-for="link in links" :key="link.id" :data-mot-href="link.href">
								<div class="mui-slider-right mui-disabled">
									<a href="javascript:;" class="mui-btn mui-btn-blue mui-icon mui-icon-redo motLinkForwordBtn" :data-mot-href="link.href"></a>
								</div>
								<div class="mui-slider-handle">
									<img class="mui-media-object mui-pull-left" :src="link.icon_url">
									<div class="mui-media-body">
										<div>{{ link.title }}</div>
										<p class='mui-ellipsis'>{{ link.href }}</p>
									</div>
									<p v-html="link.summary"></p>
								</div>
							</li>
						</ul>
						<button :disabled="!cHasMore" id="motLoadMore" type="button" class="mui-btn mui-btn-block" data-loading-text="加载中..." style="border:none;" v-text="cLoadMoreBtnText"></button>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>

		<script src="../statics/scripts/mui.min.js"></script>
		<script src="../statics/scripts/vue.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			(function() {

				var apiBaseUrl = 'http://api.node.susulink.haoxx.top';

				function pulldownToRefresh() {
					vmContentBox.$data.currentPageNumber = 1;
					mui.getJSON(apiBaseUrl + '/api/common_link/pageSelect.json', {
						page_number: vmContentBox.$data.currentPageNumber,
						page_size: vmContentBox.$data.pageSize,
						keywords: vmContentBox.$data.keywords
					}, function(res) {
						if(res.code === 1) {
							vmContentBox.$data.links = res.links;
							vmContentBox.$data.total = res.total;
							mui('#motContentBox').pullRefresh().endPulldownToRefresh();
						}
					});
				}

				mui.init({
					pullRefresh: {
						container: "#motContentBox", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
						down: {
							auto: true, //可选,默认false.首次加载自动下拉刷新一次
							callback: pulldownToRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						}
					}
				});

				mui.plusReady(function() {

					var nativeWebview, imm, InputMethodManager;
					var initNativeObjects = function() {
						if(mui.os.android) {
							var main = plus.android.runtimeMainActivity();
							var Context = plus.android.importClass("android.content.Context");
							InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
							imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
						} else {
							nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
						}
					};
					var showSoftInput = function() {
						if(mui.os.android) {
							imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
						} else {
							nativeWebview.plusCallMethod({
								"setKeyboardDisplayRequiresUserAction": false
							});
						}
					};

					initNativeObjects();
					showSoftInput();
				});

				//语音识别完成事件
				mui(document.body).on('recognized', '#search', function(e) {
					vmContentBox.$data.keywords = e.detail.value;
				});

				mui(document.body).on('tap', '#motLoadMore', function() {
					var _this = this;
					mui(_this).button('loading');
					vmContentBox.$data.currentPageNumber++;
					mui.getJSON(apiBaseUrl + '/api/common_link/pageSelect.json', {
						page_number: vmContentBox.$data.currentPageNumber,
						page_size: vmContentBox.$data.pageSize,
						keywords: vmContentBox.$data.keywords
					}, function(res) {
						mui(_this).button('reset');
						if(res.code === 1) {
							vmContentBox.$data.links = vmContentBox.$data.links.concat(res.links);
							vmContentBox.$data.total = res.total;
						}
					});
				});

				mui(document.body).on('tap', '.motLinkForwordBtn', function() {
					plus.runtime.openURL(this.dataset.motHref);
				});

				mui(document.body).on('tap', '.motLeftMenu', function() {
					var dataset = this.dataset;
					var nw = mui.openWindow({
						url: dataset.sslUrl,
						id: dataset.sslUrl,
						styles: {
							popGesture: 'hide'
						}
					});
				});

				var vmContentBox = new Vue({
					el: '#motContentBox',
					data: {
						links: [],
						total: 0,
						currentPageNumber: 1,
						pageSize: 20,
						keywords: ''
					},
					computed: {
						cHasMore: function() {
							return this.links.length < this.total;
						},
						cLoadMoreBtnText: function() {
							return this.cHasMore ? '点击加载更多' : '没有更多了';
						}
					},
					methods: {
						onSearchKeywordsChange: function() {
							pulldownToRefresh();
						}
					}
				});

			})();
		</script>
	</body>

</html>